<template>
  <div class="App">
    <h1 class="content">我是App</h1> 
    <input type="text" ref="iptEle"/>
    <button @click="getMsg">获取输入框的值</button>
    <Count></Count>
    </div>
</template>

<script>
import Count from "@/components/Count"
export default {
name:"App",
components:{
  Count
},
methods:{
    // 点击按钮收集表单的值：
      // 推荐方法，把表单和数据进行数据双向绑定，直接获取数据的值即可
      // ref方法，获取到表单的元素，进行DOM操作

      // ref的使用
        // 如果想要获取某个真实DOM，则在当前模板元素上添加一个ref属性，值为一个字符串名称
        // 当模板渲染后，在当前的组件实例上的$refs对象中，就会有一个当前字符串名称的属性，值为被设置ref的真实DOM
  getMsg(){
    console.log(this);
    console.log(this.$refs.iptEle.value);
  }
}
}
</script>
